<!-- 秒杀列表 -->
<template>
	<view class="page_box">
		<view class="content_box">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<view class="align-center flex" style="height: 70rpx; background-color: #FFE0CA;">
					<image src="../../static/deng.png" mode="" style="width: 26rpx; height: 28rpx;" class="margin-left"></image>
					<text style="font-size: 26rpx; color:#A0683F ; font-weight: 500; font-family: PingFang SC;" class="margin-left-sm">买单可享分红，最高全额返现</text>
				</view>
				<view class="titl padding-lr">
					<text>付款给：</text>
					<input
						type="text"
						value=""
						v-model="address"
						disabled=""
						placeholder="请填写账号信息"
						placeholder-style="color:'#232323'"
						placeholder-class="input"
						class="margin-left"
					/>
				</view>
				<text class="padding-top padding-lr flex">金额：</text>
				<view class="titl padding-lr">
					<text>￥：</text>
					<input type="number" value="" v-model="amount" placeholder="请输入金额" placeholder-style="color:'#232323'" placeholder-class="input" class="margin-left" />
				</view>
				<view class="titl padding-lr">
					<text>备注：</text>
					<input type="text" value="" v-model="remark" placeholder="填写备注" placeholder-style="color:'#232323'" placeholder-class="input" class="margin-left" />
				</view>
				<view class="titl padding-lr" @tap="jump('pages/app/coupon/listt')">
					<text>优惠券：</text>
					<input
						type="text"
						value=""
						v-model="couponData.name"
						disabled=""
						placeholder="选择优惠券"
						placeholder-style="color:'#232323'"
						placeholder-class="input"
						class="margin-left"
					/>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>

				<text class="padding-top padding-lr flex">支付方式：</text>
				<view class="titl padding-lr " @click="options(1)" :class="[optionsShow == 1 ? 'selected' : '']">
					<image src="../../static/weix.png" mode="" style="width: 36rpx; height: 30rpx;"></image>
					<text class="margin-left">微信支付</text>
				</view>
				<view class="titl padding-lr" @click="options(2)" :class="[optionsShow == 2 ? 'selected' : '']" >
					<image src="../../static/qianbao.png" mode="" style="width: 36rpx; height: 30rpx;"></image>
					<text class="margin-left">余额支付</text>
				</view>
				<button class="cu-btn submit  " @click="submit">提交</button>
				<view class="flex align-center justify-center" style="height: 120rpx;">
					<image src="../../static/henxian.png" mode="" style="width: 559rpx; height: 28rpx;"></image>
				</view>
				<view class="flex align-center justify-between shadow radius padding-lr " style="width: 706rpx; height: 110rpx; margin: 0 auto; background-color: #FFFFFF;">
					<view class="flex align-center">
						<image src="../../static/11.png" mode="" style="width: 65rpx; height: 65rpx;"></image>
						<text style="color: #232323; font-weight: 500; font-size: 28rpx;" class="margin-left">分红条件</text>
					</view>
					<text style="color: #A0683F; outline-offset: 26rpx;">店内消费最低{{xx.a_bonus_condition}}元以上</text>
				</view>

				<view
					class="flex align-center justify-between shadow radius padding-lr "
					style="width: 706rpx; height: 110rpx; margin: 0 auto; background-color: #FFFFFF; margin-top: 15rpx;"
				>
					<view class="flex align-center">
						<image src="../../static/22.png" mode="" style="width: 65rpx; height: 65rpx;"></image>
						<text style="color: #232323; font-weight: 500; font-size: 28rpx;" class="margin-left">分红权限</text>
					</view>
					<text style="color: #A0683F; outline-offset: 26rpx;">享受每笔订单的{{xx.shareholders_dividends}}%加权分红</text>
				</view>

				<view
					class="flex align-center justify-between shadow radius padding-lr "
					style="width: 706rpx; height: 110rpx; margin: 0 auto; background-color: #FFFFFF;margin-top: 15rpx;"
				>
					<view class="flex align-center">
						<image src="../../static/33.png" mode="" style="width: 65rpx; height: 65rpx;"></image>
						<text style="color: #232323; font-weight: 500; font-size: 28rpx;" class="margin-left">分红限制</text>
					</view>
					<text style="color: #A0683F; outline-offset: 26rpx;">分红期限为{{xx.a_bonus_cycle}}天,最高全额返现</text>
				</view>

				<view class="response flex align-center justify-center" style="height: 100rpx;">
					<text style="color: #A0683F; outline-offset: 26rpx; ">
						<text class="cuIcon-title"></text>
						充值按10%返到分红额度上
					</text>
				</view>

				<view class="" style="height: 60rpx;"></view>
				<!-- 空白 -->
				<shopro-empty v-if="false" :emptyData="emptyData"></shopro-empty>
				<!-- 加载更多 -->
				<u-loadmore v-if="goodsList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
				<!-- loading -->
				<shopro-load v-model="isLoading"></shopro-load>
			</scroll-view>
		</view>
		<view class="foot_box"></view>

		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			emptyData: {
				img: this.$IMG_URL + '/imgs/empty/empty_goods.png',
				tip: '暂无秒杀商品，敬请期待~',
			},
			isLoading: false,
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			lastPage: 1,
			currentPage: 1,
			tabCurrent: 'ing',
			goodsList: [],
			loading: false,
			xx:{},
			optionsShow: 1,
			address: '',
			amount: '', // 金额
			id: '', // 充值id
			remark: '', // 备注
			user_coupons_id: '', //  优惠券ID
			couponData: {},
			payment:'wechat'
		};
	},
	computed: {},
	onLoad() {
		this.getInfo();
		this.settingLst();
	},
	onShow() {
		console.log('this.couponData :>> ', this.couponData);
		this.user_coupons_id = this.couponData.user_coupons_id;
	},
	methods: {
		// 路由跳转
		jump(path, parmas) {
			
			this.$Router.push({
				path: path,
				query: parmas,
			});
		},
		options(e) {
			this.optionsShow = e;
			if (e==1) {
				this.payment = 'wechat'
			}else {
				this.payment = 'wallet'
			}
		},
		submit() {
			if (!this.amount) return this.$tools.toast('请填写金额');
			this.isLoading = true;
			let that = this;
			that.$api('topupOrdr', {
				amount: this.amount,
				user_coupons_id: this.user_coupons_id,
				remark: this.remark,
				type: 'writeofforder',
			}).then(res => {
				this.isLoading = false;
				console.log('res 2222:>> ', res);
				this.prepayments(res.data.order_number);
				// res.data.order_number
			});
		},
		prepayments(order_sn) {
			console.log('order_sn :>> ', order_sn);
			let that = this;
			that.$api('prepayments', { order_sn, payment: this.payment, attach: 'writeofforder' }).then(res => {
				console.log('res :>> ', res);
				this.isLoading = false;
				if (res.code) {
					var data = res.data.pay_data;
					console.log('data :>> ', data);
					uni.requestPayment({
						provider: data.provider,
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: res => {
							console.log('success:' + JSON.stringify(res));
							this.$tools.toast('付款成功');
							setTimeout(() => {
								this.jump('pages/index/index');
							}, 1000);
						},
						fail: err => {
							console.log('fail:' + JSON.stringify(err));
						},
					});
				}
			});
		},

		getInfo() {
			let that = this;

			that.$api('storeInfo', {}).then(res => {
				console.log('res :>> ', res);
				this.xx = res.data
				this.address = res.data.name;
			});
		},

		settingLst() {
			let that = this;

			that.$api('settingLst', {}).then(res => {
				console.log('res 11:>> ', res);
				this.id = res.data.id;
			});
		},

		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getGoodsList();
			}
		},
		// 秒杀列表
		getGoodsList() {
			let that = this;
			that.isLoading = false;
			that.loadStatus = 'loading';
			that.$api('storeInfo', {}).then(res => {
				if (res.code === 1) {
					that.isLoading = false;
					that.goodsList = [...that.goodsList, ...res.data.data];
					that.lastPage = res.data.last_page;
					if (that.currentPage < res.data.last_page) {
						that.loadStatus = 'loadmore';
					} else {
						that.loadStatus = 'nomore';
					}
				}
			});
		},
	},
};
</script>

<style lang="scss">
.titl {
	display: flex;
	align-items: center;
	width: 706rpx;
	height: 100rpx;
	background: #ffffff;
	border-radius: 10rpx;
	margin: 0 auto;
	margin-top: 30rpx;
	.rigth {
	}
	text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #232323;
	}
	/deep/.input {
		font-size: 28rpx;
	}
	input {
		width: 60vw;
		color: #232323;
	}
}
.submit {
	display: flex;
	justify-content: center;
	width: 530rpx;
	height: 90rpx;
	background: #b39c72 !important;
	border-radius: 57rpx;
	margin: 0 auto;
	margin-top: 50rpx;
	//margin-top: 80rpx;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.selected {
	border: 3rpx solid #b39c72 !important;
	box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
}

.tab-box {
	.tab-item {
		flex: 1;
		line-height: 84rpx;
		text-align: center;
		background: #636363;
		color: #fff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		position: relative;
		border-right: 1rpx solid #fff;
		.tab-triangle {
			position: absolute;
			z-index: 2;
			bottom: -14rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 28rpx;
			height: 28rpx;
			background: #e6b873;
			transform: rotate(45deg);
			transform-origin: center;
		}
	}

	.tab-active {
		background: #b39c72;
	}
}
.goods-item {
	margin-bottom: 2rpx;
	.cu-progress {
		width: 225rpx;
		height: 16rpx;
		.progress--color {
			background: #e6b873;
		}
	}
	.progress-text {
		color: #999999;
		font-size: 20rpx;
		margin-left: 25rpx;
	}
	.buy-btn {
		position: absolute;
		right: 0;
		bottom: -20rpx;
		width: 140rpx;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;

		padding: 0;
	}
	.btn-end,
	.btn-nostart {
		background: rgba(238, 238, 238, 1);
		color: #999999;
	}
	.btn-ing {
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		color: rgba(255, 255, 255, 1);
	}
}
</style>
